/*
  学习目标：shouldComponentUpdate(nextProps, nextState)
  shouldComponentUpdate 可以接受惨形参，代表是 最新的props,最新的state
  目标： count 改变时，Son页面更新。msg改变时，Son页面不更新
  判断：✨✨页面用到的数据变化了，才需要更新
  步骤：
     1. 如果页面需要用到的数据(count)改变了，那么我就更新，也就是返回 true
     2. 如果页面需要用到的数据(count)没改变，那么我不更新，也就是返回 false
     3. 传递过来的数据有其他内容，如果不需要用，直接返回false
*/

import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
    msg: 'app',
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <h1>msg: {this.state.msg}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点我修改数量
        </button>
        <button onClick={() => this.setState({ msg: this.state.msg + '~' })}>
          点我修改msg
        </button>

        <Son count={this.state.count} msg={this.state.msg}></Son>
        {/* <Child></Child> */}
      </div>
    );
  }
}
class Son extends React.Component {
  shouldComponentUpdate(nextProps) {
    console.log('nextProps -----> ', nextProps);
    // 判断新的值 和 旧的值，如果相等，那就没必要更新，所以返回 false
    if (nextProps.count === this.props.count) {
      return false;
    } else {
      return true;
    }
  }
  render() {
    console.log('我是Son，我render了 -----> ');
    return <div>我是Son - {this.props.count}</div>;
  }
}

class Child extends React.Component {
  state = { msg: 'child' };
  render() {
    console.log('我是Child，我render了 -----> ');
    return (
      <div>
        <button
          onClick={() => {
            this.setState({ msg: '修改了msg' });
          }}
        >
          点我修改 child 的 msg
        </button>
        我是Child
      </div>
    );
  }
}
